<template>
  <nav class="navigation">
    <div class="nav-brand">
      习惯养成计划
    </div>
    <div class="nav-links" v-if="isLoggedIn">
      <router-link to="/children">孩子管理</router-link>
      <a @click="logout" class="logout-btn">退出登录</a>
    </div>
  </nav>

  <!-- 子导航栏（当在孩子相关页面时显示） -->
  <nav class="sub-navigation" v-if="showChildNav">
    <router-link :to="`/habits/${childId}`">习惯管理</router-link>
    <router-link :to="`/timeline/${childId}`">时间轴</router-link>
    <router-link :to="`/calendar/${childId}`">打卡日历</router-link>
    <router-link :to="`/statistics/${childId}`">数据统计</router-link>
    <router-link :to="`/points/${childId}`">积分兑换</router-link>
  </nav>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      isLoggedIn: false,
      showChildNav: false,
      childId: null
    }
  },
  watch: {
    '$route'(to) {
      this.updateNavState(to)
    }
  },
  methods: {
    updateNavState(route) {
      this.isLoggedIn = !!localStorage.getItem('token')
      this.childId = route.params.childId
      this.showChildNav = this.childId && route.name !== 'ChildList'
    },
    logout() {
      localStorage.removeItem('token')
      localStorage.removeItem('userId')
      this.$router.push('/login')
    }
  },
  mounted() {
    this.updateNavState(this.$route)
  }
}
</script>

<style scoped>
.navigation {
  background: #42b983;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.nav-brand {
  font-size: 20px;
  font-weight: bold;
}

.nav-links a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  cursor: pointer;
}

.sub-navigation {
  background: #f5f5f5;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.sub-navigation a {
  color: #666;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
}

.sub-navigation a.router-link-active {
  background: #42b983;
  color: white;
}

.logout-btn:hover {
  text-decoration: underline;
}
</style> 